<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <!-- 
     :picker-options="{
              disabledDate: (time) =>
                !(
                  time.getTime() >= Date.now() - 365 * 8.64e7 &&
                  time.getTime() < Date.now() - 8.64e7
                ),
            }"
   -->
  <div style="margin-right: 10px">
    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span> 商品全局概况 </span>
        <span
          >自定义日期<el-date-picker
            key="daterange"
            v-model="rangeDate"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
            @change="getselectCommodityOverview"
            size="mini"
        /></span>
      </div>
      <KoiCardI :itemData="SaleProductdata" style="margin-bottom: 10px" />
      <KoiCardII :itemData="SaleProductdata" />
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-collection"></i>商品销售目标</span>
          </div>

          <div class="content" style="font-size: 14px; margin-left: 5px">
            销售目标
          </div>
          <div class="content" style="font-weight: bold; font-size: 20px">
            <span> {{ twoFixed(SaleProductdata.salesAmount) }}万</span>
          </div>

          <card
            :id="'quarterly'"
            :chartData="echartDataquarterly"
            height="205px"
            width="100%"
          />

          <div class="content">
            <progressYear :progressValue="SaleProductdata.yearProgress" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">品类年度销售占比</div>
          <PieChart :chartData="PieChartData" id="PieChartData" />
        </el-card>
      </el-col>
    </el-row> -->
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }} 品类销售趋势(单位：万)
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <!-- <LineChart /> -->
      <div style="margin: 5px 5px; height: 410px" ref="salesQuantity"></div>

      <el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
        <el-table-column fixed prop="dataDateUnit" label="类别" width="100" align="center">
        </el-table-column>
        <el-table-column :formatter="stateFormat" v-for="(month, index) in months" :key="index"
          :prop="'salesData.' + index" :label="month" align="center" width="110">
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}同期品类销售额对比分析(单位：万){{ " " + dataYear.dataYear }}
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24">
          <barLineIII :echartDataSku="barLineChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          <el-table :data="barLineData" style="width: 100%" border :height="300" :row-class-name="tableRowClassName">
            <el-table-column prop="category1" label="类别" width="125"></el-table-column>
            <el-table-column prop="salesAmount" label="" width="150" :formatter="stateFormat">
              <template #header>
                <span style="white-space: normal;">
                  销售额(万)<br />{{ dataYear.dataYear }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="yoySalesAmount" label="" width="150" :formatter="stateFormat">

              <template #header>
                <span style="white-space: normal;">
                  上一年销售额(万)<br />{{ dataYear.lastdataYear }}
                </span>
              </template></el-table-column>
            <el-table-column :formatter="PerseFormat" prop="salesAmountYoy" label="同比" width="100"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCategorySaleTend,
  selectCategorySaleYoy,
  selectCategorySaleAmountRatio,
  selectCommodityOverview,
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLineIII from "./components/barLineIII";
import PieChart from "./components/PieChart";
import card from "./components/card";
import progressYear from "./components/progressYear";
import KoiCardI from "./components/KoiCardI";
import KoiCardII from "./components/KoiCardII";
export default {
  props: {
    query: {
      type: Object,
      default: () => { },
    },
    dataYear: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    KoiCardI,
    KoiCardII,
    barLineIII,
    LineChart,
    PieChart,
    progressYear,
    card,
  },
  data() {
    return {
      rangeDate: [],
      SaleProductdata: {},
      PieChartData: {},
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
      //对比
      barLineChart: {},
      barLineData: [],
      echartDataquarterly: {
        value: 0,
        name: "",
        bg: "",
      },
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectCategorySaleTend("salesQuantity");
        this.getselectCategorySaleYoy();
        // this.getselectCategorySaleAmountRatio();
        // this.getselectCommodityOverview();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // return "font-weight: bold;";
      if (row.dataDateUnit === "汇总" || row.category1 === "汇总") {
        return "highlight-row";
      } else {
        return "";
      }
    },
    getselectCommodityOverview() {
      let obj;
      if (this.rangeDate.length > 0) {
        obj = {
          ...this.query,
          startDate: this.rangeDate[0],
          endDate: this.rangeDate[1],
        };
      } else {
        obj = { ...this.query };
      }
      selectCommodityOverview(obj).then((response) => {
        this.SaleProductdata = response;
        this.echartDataquarterly.value = response.completeRate;
        this.echartDataquarterly.name = "目标完成率";
        if (response.completeRate > response.yearProgress) {
          this.echartDataquarterly.bg = "#2ba245";
        } else {
          this.echartDataquarterly.bg = "#ff3334";
        }
      });
    },
    getselectCategorySaleAmountRatio() {
      selectCategorySaleAmountRatio(this.query).then((response) => {
        this.PieChartData = {
          xData: [],
          female: [],
        };
        this.PieChartData.xData = Object.keys(response);
        this.PieChartData.female = Object.entries(response).map(
          ([name, value]) => ({
            value,
            name,
          })
        );
      });
    },

    getselectCategorySaleYoy() {
      selectCategorySaleYoy(this.query).then((response) => {
        this.barLineData = response;
        this.barLineChart = {
          columns: ["品类", "销售额", "上一年销售额", , "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.category1,
            销售额: item.salesAmount,
            上一年销售额: item.yoySalesAmount,
            同比: item.salesAmountYoy ? item.salesAmountYoy : 0,
          });
        });
      });
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        console.log(JSON.stringify(keyArray));
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key] || 0),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
            axisLabel: {
              rotate: 25, // 倾斜45度
              interval: 0, // 尝试显示所有标签，但实际效果可能因图表大小和标签长度而异
              // 可以通过 formatter 函数自定义标签内容，但在此例中我们直接倾斜
            },
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        //   myChart.setOption(option);
        var myChartDom = this.$refs.salesQuantity;

        // 检查是否已经存在ECharts实例
        if (echarts.getInstanceByDom(myChartDom)) {
          // 如果存在，销毁它
          echarts.getInstanceByDom(myChartDom).dispose();
        }

        // 初始化新的ECharts实例
        var myChart = echarts.init(myChartDom);
        // if (response.length == 0) {
        //   return;
        // } else {
        myChart.setOption(option);
        // const E = echarts.init(this.$refs.salesQuantity);

        // E.setOption(option);
      });
    },
  },
};
</script>
<style lang="scss" >
/* 添加你想要的特定行的CSS样式 */
.highlight-row {
  position: sticky;
  bottom: 0;
  font-weight: bold;
}
</style>
商品销售金额

999,999


商品退款金额

999,999


商品销售件数


/** 销售金额 */
@Excel(name = "销售金额")
private Double salesAmount;

/** 退款金额 */
@Excel(name = "退款金额")
private Double returnAmount;

/** 销售件数 */
@Excel(name = "销售件数")
private Integer salesNumber;

/** 昨日销售金额 */
@Excel(name = "昨日销售金额")
private Double salesAmountYesterday;

/** 昨日退款金额 */
@Excel(name = "昨日退款金额")
private Double returnAmountYesterday;

/** 昨日销售件数 */
@Excel(name = "昨日销售件数")
private Integer salesNumberYesterday;

/** 商品访客数 */
@Excel(name = "商品访客数")
private Integer visitors;

/** 库存数量 */
@Excel(name = "库存数量")
private Integer inventoryQuantity;

/** 销售目标 */
@Excel(name = "销售目标")
private Double targetAmount;

/** spu款式数量 */
@Excel(name = "spu款式数量")
private Integer spuQuantity;

/** 本月上新spu种类数量 */
@Excel(name = "本月上新spu种类数量")
private Integer spuQuantityLastMonth;

/** sku种类数量 */
@Excel(name = "sku种类数量")
private Integer skuQuantity;
/** 本月新增sku种类数量 */
@Excel(name = "本月新增sku种类数量")
private Integer skuQuantityLastMonth;

/** 商品出库件数 */
@Excel(name = "商品出库件数")
private Integer outWarehouseQuantity;

/** 昨日商品出库件数 */
@Excel(name = "昨日商品出库件数")
private Integer outWarehouseQuantityYesterday;

/** 在销商品数量 */
@Excel(name = "在销商品数量")
private Integer onSaleQuantity;

/** 目标完成率 */
@Excel(name = "目标完成率")
private Double completeRate;